<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素的遍历</title>
		<!-- 元素遍历:  用于DOM树中遍历元素  [理解:针对元素嵌套:父子级]  
		     children()       功能:获取匹配元素集合中每个元素的子元素
			 parent()         功能:获取匹配元素集合中每个元素的父元素
			 
			 
			 siblings()       功能:获取匹配元素集合中每个元素的所有兄弟元素
			 
			 next()           功能:获取匹配元素中每个元素的下一个兄弟元素
			 prev()           功能:获取元素匹配集合中每个元素的上一个兄弟元素
			 
			 each()           功能：遍历匹配元素的集合---遍历所有子元素
			                  语法糖  each(function(index,element){
								      $(element).text(`${index}`)
									  注意：打印遍历的值，不可以使用单双引号+拼接
									  功能：获取到的元素，遍历元素内容
							  })
							  index:下标    element   元素    形参
		
		-->
		<style>
			.container{
				border: 1px solid red;
				padding: 10px;
				margin: 10px;
			}
			.box{
				background: #baff95;
				padding: 10px;
				margin: 10px;
			}
			.button{
				margin: 5px;
			}
		</style>
		<script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- html   div.container   父级  6个div.box  每个#box1  子级
		            6个按钮
		     css:   .container添加样式  边框1px,内外边距10px
			        .box添加样式        背景色 内外边距10px
					button添加样式      外边距:5px
		    jq:     引入
		 
		 -->
		 <div class="container">
		 	<div class="box" id="box1">盒子1</div>
		 	<div class="box" id="box2">盒子2</div>
		 	<div class="box" id="box3">盒子3</div>
		 	<div class="box" id="box4">盒子4</div>
		 	<div class="box" id="box5">盒子5</div>
		 	<div class="box" id="box6">盒子6</div>
		 </div>
		 <button id="gc">获取子元素</button>
		 <button id="gp">获取父元素</button>
		 <button id="gs">获取兄弟元素</button>
		 <button id="gn">获取下一个兄弟元素</button>
		 <button id="gr">获取上一个兄弟元素</button>
		 <button id="loop">遍历元素</button>
		 <script>
			 /*1.点击 获取子元素 按钮 实现.container下所有子元素*/
			 $("#gc").click(function(){
				//通过 父找子  函数--添加效果
				 $(".container").children().css("background-color",#ff0);
			 });
			 /*2.点击  获取父元素  实现.container 添加背景色*/
			$("#gp").click(function(){
			//通过 父找子  函数--添加效果
			$("#box2").parent().css("background-color","blue");
			});
			 /*3.点击  获取兄弟元素  按钮  实现除了  #box4   字体颜色不变 , 其他变色*/
			  $("#gs").click(function(){
			             $("#box4").siblings().css("color", "red");
			        });
			 /*4.点击  获取下一个兄弟元素  按钮   实现#box4  下一个兄弟  添加背景色*/
			  $("#gn").click(function(){
			            $("#box4").next().css("background-color", "yellow");
			        });
			 /*5.点击  获取上一个兄弟元素  按钮   实现#box6   上一个兄弟  添加效果
			                                            圆\背景图\背景色\盒子阴影
			  
			 */
			 $("#gr").click(function(){
			           $("#box6").prev().css({
						   "width":"100px",
						   "height":"100px",
						   "background-color":"#ff0",
						   "border-radius":"50%"
						   "background-image":"url(../img/5.png)",
						   "box-shadow":"5px 5px 10px #ff0"
					   })
										   });
			/*6.点击  遍历元素 按钮  实现每个盒子上 ， 这是第几个盒子*/
				$("#loop").click(function(){
					//通过 .box  抓到6个元素【一组集合】
					$(".box").each(function(i,e){//e元素  代表元素  i  代表下标
					//每个盒子加文字 ：这是第几个盒子
					$(e).text(`这是第${i+1}盒子`);
						
					});
				});
		 </script>
	</body>
</html>